<template>
	<view class="cc-swich-wrap">
		<block v-for="(item, index) in list">
			<view @click="handleClick(index)" :class="index===currentIndex?'active':''">{{item}}</view>
			<view v-if="index!==list.length-1" class="divider" />
		</block>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref,
		watch
	} from 'vue';

	const props = defineProps({
		list: {
			type: Array,
			default: () => ['自取', '外卖'],
		},
		current: {
			type: Number,
			default: 0,
		},
	});

	const currentIndex = ref(props.current)

	const emit = defineEmits(['change']);
	const handleClick = (index) => {
		currentIndex.value = index;
		emit('change', index);
	}
</script>

<style lang="scss" scoped>
	.cc-swich-wrap {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		gap: 30rpx;

		view {
			width: auto;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 32rpx;
			color: #666;

			&.active {
				font-size: 46rpx;
				font-weight: 600;
				color: #000;
			}
		}

		.divider {
			width: 1rpx;
			height: 35rpx;
			background-color: #c8c7cc;
			opacity: 0.6;
		}
	}
</style>